<template>
  <div class="draft-page-root">
    <van-nav-bar
        title="草稿箱"
        left-arrow
        @click-left="handleBack"
        :safe-area-inset-top="true"
    />
    <!-- 状态筛选标签：匹配后端状态（未发布=0，审核未过=-1） -->
    <van-tabs v-model:active="activeTab" class="status-tabs" @change="handleTabChange">
      <van-tab title="全部" />
      <van-tab title="未发布" />
      <van-tab title="审核未过" />
    </van-tabs>

    <!-- 无草稿状态：加载完成且无数据时显示 -->
    <div v-if="filteredDrafts.length === 0 && !loading" class="empty-draft">
      <van-empty
          image="https://picsum.photos/200/200?random=1"
          description="暂无符合条件的草稿~"
      >

      </van-empty>
    </div>

    <!-- 草稿列表：滚动加载后端数据 -->
    <van-list
        v-else
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="fetchDrafts"
        :immediate-check="false"
        class="draft-list-container"
    >
      <van-cell-group inset class="draft-group">
        <van-cell
            v-for="(draft, index) in filteredDrafts"
            :key="draft.id"
            class="draft-item"
            clickable
            @click="navigateToCreate(draft.id)"
        >
          <template #default>
            <div class="draft-content">
              <!-- 状态标签：根据后端状态显示 -->
              <div class="status-tag" :class="statusClass[draft.status]">
                {{ statusText[draft.status] }}
              </div>

              <!-- 文字内容：用后端title字段（原错误用了content，已修正） -->
              <p class="draft-text" v-if="draft.title">
                {{ draft.title }}
              </p>
              <p class="draft-text empty-text" v-else>无文字内容</p>

              <div v-if="extractSrcFromHtml(draft.content)" class="draft-media">


                <!-- 图片类型：渲染 van-image -->
                <template v-if="getMediaType(extractSrcFromHtml(draft.content)) === 'image'">
                  <van-image
                      :src="extractSrcFromHtml(draft.content)"
                      fit="cover"
                      class="media-preview"
                      :alt="`草稿图片 ${index + 1}`"
                      lazy-load
                  />
                  <van-icon name="image" class="media-icon" />
                </template>

                <!--              <template v-else-if="getMediaType(extractSrcFromHtml(draft.content)) === 'video'">
                                <van-video
                                    :src="extractSrcFromHtml(draft.content)"
                                    poster="https://picsum.photos/400/300?random=video-poster"
                                    class="media-preview"
                                    :alt="`草稿视频 ${index + 1}`"
                                    controls
                                    lazy-load
                                />
                                <van-icon name="play-circle" class="media-icon video-icon" />
                              </template>-->
              </div>

              <!-- 草稿信息：显示后端createTime -->
              <div class="draft-info">
                <span class="draft-time">{{ formatTime(draft.createTime) }}</span>


                <!-- 操作按钮组 -->
                <div class="draft-actions">
                  <!-- 提交按钮（仅未发布=0显示） -->
                  <van-button
                      v-if="draft.status === 0"
                      size="mini"
                      type="primary"
                      class="upload-btn"
                      @click.stop="handleSubmit(draft.contentId)"
                  >
                    提交
                  </van-button>

                  <!-- 重新编辑（仅审核未过=-1显示） -->
                  <van-popover
                      v-if="draft.status === -1"
                      placement="top"
                      :content="draft.reason || '未提供具体原因'"
                      trigger="hover"
                  >

                  </van-popover>
                  <van-button
                      size="mini"
                      type="warning"
                      class="modify-btn"
                      @click.stop="handleModify(draft.contentId)"
                  >
                    修改
                  </van-button>


                  <!-- 删除按钮 -->
                  <van-button
                      size="mini"
                      type="danger"
                      class="delete-btn"
                      @click.stop="handleDelete(draft.contentId)"
                  >
                    删除
                  </van-button>
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>


  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from "@/utils/axios.ts";
import {Dialog, Toast} from "vant";
// import 'vant/es/video/style';

const router = useRouter();

// 1. 保留data响应式对象：用于接收/暂存后端数据（如单个草稿详情）
const data = reactive({
  title: '',       // 接收后端文字内容（对应草稿的title）
  content: '',     // 接收后端媒体地址（对应草稿的content，阿里云地址）
  contentType: '', // 接收内容类型（1=图文，2=视频）
  status: ''       // 接收状态（-1/0/1）
});

// 2. 列表核心状态：存储草稿列表+分页信息
const drafts = ref([]);       // 草稿列表（后端返回的所有0/-1状态数据）
const loading = ref(false);   // 加载中状态
const finished = ref(false);  // 无更多数据状态
const currentPage = ref(1);   // 当前页码
const pageSize = ref(10);     // 每页条数
const activeTab = ref(0);     // 当前选中标签（0=全部，1=未发布，2=审核未过）

// 3. 状态映射：后端状态→前端显示
const statusText = {
  '-1': '审核未过',
  0: '未发布',
  1: '已提交' // 后端过滤，草稿箱不显示
};
const statusClass = {
  '-1': 'status-rejected', // 橙色
  0: 'status-unpublished', // 蓝色
  1: 'status-submitted'    // 灰色（备用）
};

// 4. 草稿筛选：根据标签过滤状态
const filteredDrafts = computed(() => {
  switch (activeTab.value) {
    case 0: return drafts.value; // 全部：显示所有后端返回的草稿（已过滤1）
    case 1: return drafts.value.filter(d => d.status === 0); // 未发布：仅0
    case 2: return drafts.value.filter(d => d.status === -1); // 审核未过：仅-1
    default: return [];
  }
});

// 5. 页面初始化：加载第一页草稿
onMounted(() => {
  fetchDrafts();
});

// 6. 核心方法：从后端获取草稿列表（分页）
const fetchDrafts = async () => {
  try {
    loading.value = true;

    // 调用后端接口：传递分页参数，获取状态0/-1的数据
    const res = await axios.get('/api/draftBox/list', {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value
      }
    });

    // 用data接收后端返回的整体数据（可选，便于后续复用）
    data.title = res.data?.records?.[0]?.title || ''; // 示例：取第一条草稿的title
    data.content = res.data?.records?.[0]?.content || ''; // 示例：取第一条草稿的媒体地址
    data.contentType = res.data?.records?.[0]?.contentType || '';
    data.status = res.data?.records?.[0]?.status || '';

    // 处理列表数据
    if (res.code === 200 && res.data) {
      const { records, total } = res.data;
      if (currentPage.value === 1) {
        drafts.value = records; // 第一页覆盖
      } else {
        drafts.value = [...drafts.value, ...records]; // 后续页追加
      }
      // 判断是否加载完成（当前数据量 >= 总条数）
      finished.value = drafts.value.length >= total;
      currentPage.value++; // 页码+1
    } else {
      Toast.fail('草稿加载失败：' + (res.msg || '未知错误'));
      finished.value = true;
    }
  } catch (error) {
    console.error('草稿接口请求失败：', error);
    Toast.fail('网络错误，无法加载草稿');
    finished.value = true;
  } finally {
    loading.value = false;
  }
};

// 7. 标签切换：重置页码并重新加载
const handleTabChange = () => {
  currentPage.value = 1;
  finished.value = false;
  fetchDrafts();
};

// 8. 提交草稿：修改状态为1（已提交）
const handleSubmit = async (draftId) => {
  try {
    const res = await axios.put('/api/draftBox/updateStatus', {},{
      params: {
        contentId: draftId, // 参数名改为 contentId，与后端一致
        status: 1
      }
    });

    if (res === true) {
      Toast.success('提交成功');
      // 重新加载列表（移除已提交的草稿）
      currentPage.value = 1;
      finished.value = false;
      fetchDrafts();
    } else {
      Toast.fail('提交失败：' + (res.msg || '未知错误'));
    }
  } catch (error) {
    console.error('提交接口失败：', error);
    Toast.fail('网络错误，提交失败');
  }
};

// 9. 删除草稿：调用后端删除接口
const handleDelete = async (draftId) => {
  console.log("删除事件被触发，draftId", draftId);
  try {
    // 1. 校验 draftId（不变）
    if (!draftId || isNaN(draftId)) {
      Toast.fail('草稿ID无效，无法删除');
      return;
    }

    // 2. 确认弹窗（不变）
    const { isConfirm } = await Dialog.confirm({
      title: '删除草稿',
      message: '确定要删除此草稿吗？删除后不可恢复',
    });
    // if (!isConfirm) return;

    // 3. 发送删除请求（不变）
    const res = await axios.delete(`/api/draftBox/del/${draftId}`);

    // 4. 响应判断：后端返回 Boolean，需用 res.data 取结果（修复：加 console 调试）
    console.log('删除接口返回结果：', res.data); // 新增：调试用，看是否为 true
    if (res === true) {
      Toast.success('删除成功');
      // 核心：从 drafts 数组中移除当前 draftId 的数据（确保是 number 类型匹配）
      currentPage.value = 1; // 重置为第一页
      finished.value = false; // 重置“无更多数据”状态
      await fetchDrafts();
    } else {
      Toast.fail('删除失败：后端未执行删除操作');
    }
  } catch (error) {
    if (error.name !== 'DialogCancel') {
      console.error('删除接口请求失败：', error);
      Toast.fail('网络错误，删除失败');
    }
  }
};
//修改
const handleModify = (contentId) => {
  if (!contentId) {
    Toast.fail('草稿ID无效，无法修改');
    return;
  }
  // 跳转路由：携带 contentId（草稿唯一标识）和 type=edit（标记为修改模式）
  router.push({
    path: '/content', // 假设 content 组件的路由路径是 /create（根据实际路由调整）
    query: {
      contentId: contentId, // 传递草稿ID
      type: 'edit' // 标记为“修改”模式（区分新建）
    }
  });
};


// 10. 时间格式化：保留原有逻辑，用data.draftTime暂存
const formatTime = (timestamp) => {
  if (!timestamp) return '未知时间';
  const tempTime  = new Date(timestamp); // 用data暂存当前格式化的时间
  const now = new Date();
  const diffMs = now - tempTime;
  const diffHours = Math.floor(diffMs / 3600000);
  const diffDays = Math.floor(diffHours / 24);

  if (diffHours < 1) {
    return '刚刚';
  } else if (diffHours < 24) {
    return `${diffHours}小时前`;
  } else if (diffDays < 7) {
    return `${diffDays}天前`;
  } else {
    const month = String(tempTime.getMonth() + 1).padStart(2, '0');
    const day = String(tempTime.getDate()).padStart(2, '0');
    return `${month}月${day}日`;
  }
};

// 11. 导航到创建/编辑页
const navigateToCreate = (draftId) => {
  if (draftId) {
    // 编辑：携带草稿ID跳转（创建页需通过draftId获取详情）
    router.push({ path: '/create', query: { draftId } });
  } else {
    // 新建：直接跳转
    router.push('/create');
  }
};

// 12. 返回上一页
const handleBack = () => {
  router.back();
};

//显示照片，和视频的方法
const extractSrcFromHtml = (htmlStr) => {
  if (!htmlStr || typeof htmlStr !== 'string') return ''; // 空值或非字符串直接返回

  // 正则表达式：匹配 <img> 或 <video> 标签中的 src 属性（兼容单/双引号）
  const srcReg = /<(img|video)\s+[^>]*src\s*=\s*["']([^"']+)["']/i;
  const matchResult = htmlStr.match(srcReg);

  // 匹配成功则返回 src 地址，失败返回空
  return matchResult ? matchResult[2] : '';
};

// 14. 根据 src 地址判断媒体类型（图片/视频）
const getMediaType = (src) => {
  if (!src) return '';
  // 图片后缀：jpg/png/jpeg/gif；视频后缀：mp4/mov/avi/flv
  const imgExts = ['jpg', 'png', 'jpeg', 'gif', 'webp'];
  const videoExts = ['mp4', 'mov', 'avi', 'flv', 'mkv'];

  // 获取 src 最后的后缀（如 "xxx.jpg" → "jpg"）
  const ext = src.split('.').pop().toLowerCase();

  if (imgExts.includes(ext)) return 'image';
  if (videoExts.includes(ext)) return 'video';
  return ''; // 未知类型
};
</script>

<style scoped>
/* 基础布局样式 */
.draft-page-root {
  min-height: 100vh;
  background-color: #f9f9f9;
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 限制页面内容最大宽度，大幅加宽草稿箱 */
.draft-page-root > * {
  max-width: 1200px;
  width: 100%;
}

/* 导航栏样式优化 */
.van-nav-bar {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 标签栏样式 */
.status-tabs {
  margin: 10px 0;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  --van-tab-active-text-color: #ff4d4f;
  --van-tab-active-border-color: #ff4d4f;
  --van-tab-font-size: 16px;
}

/* 无草稿样式 */
.empty-draft {
  padding: 80px 20px;
  text-align: center;
}
.create-btn {
  margin-top: 30px;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  font-size: 16px;
  padding: 12px 35px;
  border-radius: 25px;
  transition: background-color 0.3s ease;
}
.create-btn:hover {
  background-color: #e53935;
}
.btn-icon {
  margin-right: 10px;
}

/* 列表容器样式 */
.draft-list-container {
  padding: 0 20px;
}
.draft-group {
  margin: 15px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  background-color: #fff;
}

/* 草稿项样式 */
.draft-item {
  padding: 20px;
  border-bottom: 1px solid #f5f5f5;
}
.draft-item:last-child {
  border-bottom: none;
}

/* 草稿内容区 */
.draft-content {
  width: 100%;
}

/* 状态标签样式 */
.status-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 18px;
  font-size: 14px;
  color: #fff;
  margin-bottom: 12px;
}
.status-unpublished {
  background-color: #69c0ff;
}
.status-rejected {
  background-color: #fa8c16;
}

/* 文字内容样式 */
.draft-text {
  margin: 0;
  color: #333;
  font-size: 17px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 15px;
}
.empty-text {
  color: #999;
  font-size: 16px;
}

/* 媒体预览样式 */
.draft-media {
  position: relative;
  width: 120px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
  background-color: #f5f5f5;
}
.media-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 25px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.video-icon {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  padding: 6px;
}

/* 草稿信息栏 */
.draft-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #999;
}

.draft-actions {
  display: flex;
  gap: 15px; /* 增大按钮间距，避免挤压 */
}

/* 操作按钮样式优化 */
.upload-btn, .reason-btn, .modify-btn, .delete-btn {
  font-size: 12px; /* 调整按钮文字大小 */
  padding: 6px 12px; /* 调整按钮内边距 */
  border-radius: 15px;
  transition: background-color 0.3s ease;
  min-width: 60px; /* 确保按钮有足够宽度 */
  text-align: center;
}
.upload-btn {
  background-color: #69c0ff;
  border-color: #69c0ff;
  color: #fff;
}
.upload-btn:hover {
  background-color: #40a9ff;
}
.reason-btn {
  background-color: #91d5ff;
  border-color: #91d5ff;
  color: #fff;
}
.reason-btn:hover {
  background-color: #69c0ff;
}
.modify-btn {
  background-color: #faad14;
  border-color: #faad14;
  color: #fff;
}
.modify-btn:hover {
  background-color: #d48806;
}
.delete-btn {
  background-color: #ff6b6b;
  border-color: #ff6b6b;
  color: #fff;
}
.delete-btn:hover {
  background-color: #ff4d4f;
}

/* 底部悬浮按钮 */
.float-create-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  background-color: #ff4d4f;
  z-index: 999;
  transition: all 0.3s ease;
}
.float-create-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.float-create-btn .van-icon {
  font-size: 28px;
  color: #fff;
}
.draft-time-block {
  margin-bottom: 10px; /* 与下方操作按钮保持间距 */
  font-size: 13px;
  color: #999;
}

/* 草稿信息栏：操作按钮组（原.draft-info 调整为仅包含操作按钮） */
.draft-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-start; /* 按钮左对齐 */
}
</style>